{
    "detail": {
        "width": 1920,
        "height": 1030,
        "query": "function(){\n    return window.$glob.params || {}\n}",
        "header": "function(){\n    return window.$glob.params || {}\n}",
        "screen": "x",
        "mark": {
            "show": false,
            "text": "",
            "fontSize": 20,
            "color": "rgba(100,100,100,0.2)",
            "degree": -20
        },
        "scale": 1,
        "backgroundImage": "",
        "url": "",
        "gradeShow": false,
        "gradeLen": 30,
        "name": "进度部位",
        "backgroundColor": "rgba(20, 18, 93,0.9)"
    },
    "component": [
        {
            "title": "边框2",
            "name": "datav",
            "icon": "icon-biankuang",
            "img": "img/assets/borderBox/borderBox_02.png",
            "top": 20.25,
            "left": 18,
            "data": {},
            "component": {
                "width": 1864.66,
                "height": 452.05,
                "name": "borderBox",
                "prop": "borderBox"
            },
            "option": {
                "type": 2,
                "color1": "#83bff6",
                "color2": "#00CED1"
            },
            "index": "af5bf236-5087-4f33-8cd1-978ec2aa2421",
            "child": {
                "index": [],
                "paramList": []
            },
            "zIndex": 6
        },
        {
            "title": "文件夹",
            "name": "施工过程弹窗",
            "index": "d55cb26b-3179-438c-8af2-31b9ca420e5d",
            "menu": true,
            "display": false,
            "lock": false,
            "children": [
                {
                    "name": "进度仪表盘",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 5,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "(data)=>{\n    return {\n        project_id:629\n    }\n}",
                    "stylesFormatter": "",
                    "component": {
                        "width": 250.6,
                        "height": 247.8,
                        "name": "vue",
                        "prop": "vue"
                    },
                    "option": {
                        "content": "<template>\n  <div class='InstrumentPanel'>\n    <div class='peoplePanel'>\n      <img \n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4503ceffa5cea0b3351668403f4a4e1e.png'\n           alt=''>\n      <div class='panel'\n           style='width:180px;height:170px'\n           :id='randomId'></div>\n      <p class='showNum'\n         :style=\"{color : showData.warn ==='1' ? '#FF0000' : '#00ffff' }\">\n        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'\n              class='unit'>{{ showData.unit }}</span>\n      </p>\n    </div>\n\n  </div>\n\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      chart: null,\n      randomId: 0,\n      showData:{\n        value: 0,\n        unit: '',\n        percent: 1,\n        warn: 0,\n        title:'当前进度'\n      },\n       data:[{value:'开工准备',num:0},{value:'地基基础',num:25},{value:'主体结构',num:50},{value:'装饰安装',num:75},{value:'完工扫尾',num:100}]\n    };\n  },\n  mounted () {\n    \n  },\n  watch: {\n    dataChart: {\n      handler(val) {\n        let date = new Date();\n        this.randomId = date.getTime() + parseInt(Math.random(0, 1) * 1000);\n        if(val && val['进度部位']){\n          this.showData.value=this.data.find(item=>item.value==val['进度部位']).num;\n          //this.showData.title=val.data.list[0].col_name;\n        }\n        this.$nextTick(() => {\n          this.renderChart();\n        });\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n  methods: {\n    renderChart () {\n      this.chart = echarts.init(document.getElementById(this.randomId));\n      const gaugeData = [\n        {\n          value: this.showData.value == 0 ? this.showData.value : this.showData.value,\n          name: this.showData.title,\n          title: {\n            offsetCenter: ['0%', '-30%']\n          },\n          detail: {\n            valueAnimation: false,\n            offsetCenter: ['0%', '25%']\n          }\n        }\n      ];\n      let options = {\n        series: [\n          {\n            type: 'gauge',\n            radius: '80',\n            startAngle: 240,\n            endAngle: -60,\n            itemStyle: {\n              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{\n                offset: 1,\n                color:  '#00BEFB'\n              },\n              {\n                offset: 0.2,\n                color: '#CC00FC'\n              },\n              {\n                offset: 0,\n                color: '#CC00FC'\n              }])\n            },\n            pointer: {\n              show: false\n            },\n            progress: {\n              show: true,\n              overlap: false,\n              roundCap: true,\n              clip: false,\n              itemStyle: {\n                borderWidth: 0,\n                borderColor: '#464646'\n              }\n            },\n            axisLine: {\n              roundCap: true,\n              lineStyle: {\n                width: 11,\n                color: [[1, '#1B1464']],\n                shadowBlur: 5,\n                shadowColor: '#00BEFB'\n              }\n            },\n            axisTick: {\n              show: false\n            },\n            axisLabel: {\n              show: false,\n              distance: -20,\n              color: '#999',\n              fontSize: 20\n            },\n            splitLine: {\n              show: false\n            },\n            data: gaugeData,\n            title: {\n              fontSize: 14,\n              color: '#fff'\n            },\n            detail: { show: false }\n          }\n        ]\n      };\n      this.chart.clear();\n      this.chart.resize();\n      this.chart.setOption(options);\n    }\n  }\n};\n</script>\n\n<style lang='scss' scoped>\n.peoplePanel {\n  position: relative;\n\n  .panel {\n    position: absolute;\n    top: 33px;\n    left: 30px;\n  }\n\n  .showNum {\n    position: absolute;\n    top: 100px;\n    width: 240px;\n    text-align: center;\n    font-size: 36px;\n    font-weight: bold;\n\n    .unit {\n      display: block;\n      font-size: 16px;\n      font-weight: bold;\n    }\n  }\n}\n\n.thingUnit {\n  font-size: 14px !important;\n}\n\n.thingImg {\n  margin-top: 10px;\n  width: 30px;\n  height: 30px;\n}\n\n.peoplePanel {\n  position: relative;\n\n  .panel {\n    position: absolute;\n    top: 33px;\n    left: 30px;\n  }\n\n  .showNum {\n    position: absolute;\n    top: 100px;\n    width: 240px;\n    text-align: center;\n    font-size: 36px;\n    font-weight: bold;\n\n    .unit {\n      display: block;\n      font-size: 16px;\n      font-weight: bold;\n    }\n  }\n}\n\n.thingUnit {\n  font-size: 14px !important;\n}\n\n.thingImg {\n  margin-top: 10px;\n  width: 30px;\n  height: 30px;\n}\n</style>\n"
                    },
                    "left": 1055.13,
                    "top": 121.11,
                    "index": "37711414-b5e8-4eb8-837f-c7c67718c258",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 4,
                    "display": false,
                    "public": "af280484-d741-47f8-8279-ec247c2de39d",
                    "record": "3",
                    "dataMethod": "get",
                    "url": "http://platform_api.hibuilding.cn/api/v3/screen/project/project_process",
                    "proxy": true
                },
                {
                    "name": "自定义Vue组件",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 0,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "",
                    "stylesFormatter": "",
                    "component": {
                        "width": 1324.81,
                        "height": 19.91,
                        "name": "vue",
                        "prop": "vue"
                    },
                    "option": {
                        "content": "<template>\n    <div>\n        <div class=\"line\"></div>\n    </div>\n</template>\n<script>\n    export default{\n        data(){\n            return {}\n        },\n        created(){\n\n        },\n        methods:{\n\n        }\n    }\n</script>\n\n<style>\n.line{\nwidth: 100%;\n    height: 6px;\n    position: absolute;\n    bottom: -15px;\n    background: -webkit-gradient(linear,left top,right top,from(#005bff),color-stop(17%,#2e5bfc),color-stop(47%,#795bf9),color-stop(72%,#b05bf6),color-stop(90%,#d35bf4),to(#e05bf4));\n    background: linear-gradient(90deg,#005bff,#2e5bfc 17%,#795bf9 47%,#b05bf6 72%,#d35bf4 90%,#e05bf4);\n}\n</style>"
                    },
                    "left": 273.96,
                    "top": 622.89,
                    "index": "2be98734-6b60-4deb-8851-71bbf82f214d",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 3,
                    "display": true
                },
                {
                    "title": "文本框",
                    "name": "文本框",
                    "icon": "icon-text",
                    "img": "img/assets/text.png",
                    "dataType": 0,
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "",
                    "stylesFormatter": "",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "data": {
                        "value": "项目进度部位"
                    },
                    "component": {
                        "width": 195.22,
                        "height": 40,
                        "name": "text",
                        "prop": "text"
                    },
                    "option": {
                        "textAlign": "center",
                        "fontSize": 32,
                        "fontWeight": "bold",
                        "color": "#fff"
                    },
                    "left": 21.26,
                    "top": 501.14,
                    "index": "ddb5937d-2707-4793-9a34-dcca381634b9",
                    "zIndex": 2,
                    "display": false
                },
                {
                    "name": "项目工期仪表盘",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 5,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "(data)=>{\n    return {\n        project_id:629\n    }\n}",
                    "stylesFormatter": "",
                    "component": {
                        "width": 250.6,
                        "height": 247.8,
                        "name": "vue",
                        "prop": "vue"
                    },
                    "option": {
                        "content": "<template>\n  <div class='InstrumentPanel'>\n    <div class='peoplePanel'>\n      <img \n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4503ceffa5cea0b3351668403f4a4e1e.png'\n           alt=''>\n      <div class='panel'\n           style='width:180px;height:170px'\n           :id='randomId'></div>\n      <p class='showNum'\n         :style=\"{color : showData.warn ==='1' ? '#FF0000' : '#00ffff' }\">\n        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'\n              class='unit'>{{ showData.unit }}</span>\n      </p>\n    </div>\n\n  </div>\n\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      chart: null,\n      randomId: 0,\n      showData:{\n        value: 0,\n        unit: '',\n        percent: 0,\n        warn: 0,\n        title:'项目信息'\n      }\n    };\n  },\n  mounted () {\n    \n  },\n  watch: {\n    dataChart: {\n      handler(val) {\n        let date = new Date();\n        this.randomId = date.getTime() + parseInt(Math.random(0, 1) * 1000);\n        if(val){\n          this.showData.value=val['总工期']? val['总工期'] +'天' : 0 + '天';\n          // this.showData.title=val.data.list[0].col_name;\n        }\n        this.$nextTick(() => {\n          this.renderChart();\n        });\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n  methods: {\n    renderChart () {\n      this.chart = echarts.init(document.getElementById(this.randomId));\n      const gaugeData = [\n        {\n          value: this.showData.value == 0 ? this.showData.value : 50,\n          name: this.showData.title,\n          title: {\n            offsetCenter: ['0%', '-30%']\n          },\n          detail: {\n            valueAnimation: false,\n            offsetCenter: ['0%', '25%']\n          }\n        }\n      ];\n      let options = {\n        series: [\n          {\n            type: 'gauge',\n            radius: '80',\n            startAngle: 240,\n            endAngle: -60,\n            itemStyle: {\n              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{\n                offset: 1,\n                color:  '#00BEFB'\n              },\n              {\n                offset: 0.2,\n                color: '#CC00FC'\n              },\n              {\n                offset: 0,\n                color: '#CC00FC'\n              }])\n            },\n            pointer: {\n              show: false\n            },\n            progress: {\n              show: true,\n              overlap: false,\n              roundCap: true,\n              clip: false,\n              itemStyle: {\n                borderWidth: 0,\n                borderColor: '#464646'\n              }\n            },\n            axisLine: {\n              roundCap: true,\n              lineStyle: {\n                width: 11,\n                color: [[1, '#1B1464']],\n                shadowBlur: 5,\n                shadowColor: '#00BEFB'\n              }\n            },\n            axisTick: {\n              show: false\n            },\n            axisLabel: {\n              show: false,\n              distance: -20,\n              color: '#999',\n              fontSize: 20\n            },\n            splitLine: {\n              show: false\n            },\n            data: gaugeData,\n            title: {\n              fontSize: 14,\n              color: '#fff'\n            },\n            detail: { show: false }\n          }\n        ]\n      };\n      this.chart.clear();\n      this.chart.resize();\n      this.chart.setOption(options);\n    }\n  }\n};\n</script>\n\n<style lang='scss' scoped>\n.peoplePanel {\n  position: relative;\n\n  .panel {\n    position: absolute;\n    top: 33px;\n    left: 30px;\n  }\n\n  .showNum {\n    position: absolute;\n    top: 100px;\n    width: 240px;\n    text-align: center;\n    font-size: 36px;\n    font-weight: bold;\n\n    .unit {\n      display: block;\n      font-size: 16px;\n      font-weight: bold;\n    }\n  }\n}\n\n.thingUnit {\n  font-size: 14px !important;\n}\n\n.thingImg {\n  margin-top: 10px;\n  width: 30px;\n  height: 30px;\n}\n\n.peoplePanel {\n  position: relative;\n\n  .panel {\n    position: absolute;\n    top: 33px;\n    left: 30px;\n  }\n\n  .showNum {\n    position: absolute;\n    top: 100px;\n    width: 240px;\n    text-align: center;\n    font-size: 36px;\n    font-weight: bold;\n\n    .unit {\n      display: block;\n      font-size: 16px;\n      font-weight: bold;\n    }\n  }\n}\n\n.thingUnit {\n  font-size: 14px !important;\n}\n\n.thingImg {\n  margin-top: 10px;\n  width: 30px;\n  height: 30px;\n}\n</style>\n"
                    },
                    "left": 561.39,
                    "top": 127.06,
                    "index": "f8ce27ba-a28d-4aad-8732-129704e5f5d1",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 1,
                    "display": false,
                    "public": "af280484-d741-47f8-8279-ec247c2de39d",
                    "record": "3",
                    "dataMethod": "get",
                    "url": "http://platform_api.hibuilding.cn/api/v3/screen/project/project_duration",
                    "proxy": true
                },
                {
                    "name": "自定义Vue组件",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 5,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "(data)=>{\n    return {\n        project_id:1039\n    }\n}",
                    "stylesFormatter": "",
                    "component": {
                        "width": 1832.3,
                        "height": 396.19,
                        "name": "vue",
                        "prop": "vue"
                    },
                    "option": {
                        "content": "<template>\n  <div class=\"section-dialog-container\">\n    <div class=\"projectCon\">\n      <div class=\"progress-item\">\n        <div class=\"left\">\n          <p class=\"date\"><span>计划开工</span>{{ progressInfo.start_date }}</p>\n          <p class=\"date\"><span>计划竣工</span>{{ progressInfo.end_date }}</p>\n        </div>\n        <div class=\"right\">\n          <div class=\"progress-bar\">\n            <div class=\"bg\"></div>\n            <div class=\"bar\" :style=\"{ width: progressInfo.percent + '%' }\"></div>\n          </div>\n          <div class=\"icons\">\n            <img\n              class=\"comp\"\n              src=\"http://release-console.oss-cn-hangzhou.aliyuncs.com/ggzx/company/pic/progress-comp.png\"\n              alt=\"\"\n            />\n            <img\n              class=\"comp\"\n              src=\"http://release-console.oss-cn-hangzhou.aliyuncs.com/ggzx/company/pic/progress-comp.png\"\n              alt=\"\"\n            />\n            <img\n              class=\"comp\"\n              src=\"http://release-console.oss-cn-hangzhou.aliyuncs.com/ggzx/company/pic/progress-comp.png\"\n              alt=\"\"\n            />\n            <img\n              class=\"comp\"\n              src=\"http://release-console.oss-cn-hangzhou.aliyuncs.com/ggzx/company/pic/progress-comp.png\"\n              alt=\"\"\n            />\n            <img\n              class=\"not-comp\"\n              src=\"http://release-console.oss-cn-hangzhou.aliyuncs.com/ggzx/company/pic/progress-notcomp.png\"\n              alt=\"\"\n            />\n          </div>\n          <div class=\"texts\">\n            <p>开工准备</p>\n            <p>地基基础</p>\n            <p>主体结构</p>\n            <p>装饰安装</p>\n            <p>完工扫尾</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      progressInfo: { start_date: '2021-03-11', end_date: '2024-03-11', percent: 80 },\n      progressList:[],\n        percentMapping: {\n          '开工准备': 0,\n          '地基基础': 25,\n          '主体结构': 50,\n          '装饰安装': 75,\n          '完工扫尾': 100\n        },\n    };\n  },\n  watch: {\n    dataChart: {\n      handler(val) {\n        if(val){\n           this.progressInfo = {\n            start_date:val['开工日期'],\n            end_date: val['竣工日期'],\n            percent: val['进度部位']?this.percentMapping[val['进度部位']]:0\n          }\n        }\n          \n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n\n};\n</script>\n\n<style>\n\n.section-dialog-container .progress-item {\n  width: 100%;\n  border-radius: 12px;\n  display: flex;\n}\n\n.section-dialog-container .progress-item .left {\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.section-dialog-container .progress-item .left .name {\n  font-size: 24px;\n  width: 300px;\n  color: #fff;\n  overflow: hidden;\n  font-weight: bold;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.section-dialog-container .progress-item .left .days {\n  font-size: 36px;\n  color: #00ffff;\n  font-weight: bold;\n  margin-left: 72px;\n  margin-top: 30px;\n  margin-bottom: 15px;\n}\n\n.section-dialog-container .progress-item .left .days span {\n  font-size: 20px;\n}\n\n.section-dialog-container .progress-item .left .date {\n  font-size: 36px;\n  font-family: Arial-BoldMT-, Arial-BoldMT;\n  font-weight: bold;\n  color: #00ffff;\n  line-height: 24px;\n}\n\n.section-dialog-container .progress-item .left .date span {\n  margin-bottom: 15px;\n  display: block;\n  font-size: 22px;\n  font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold;\n  font-weight: bold;\n  color: #ffffff;\n  line-height: 26px;\n}\n\n.section-dialog-container .progress-item .right {\n  flex: 1;\n  margin-left: 45px;\n  padding-top: 100px;\n  padding-right:40px\n}\n\n.section-dialog-container .progress-item .right .progress-bar {\n  width: 100%;\n  position: relative;\n}\n\n.section-dialog-container .progress-item .right .progress-bar .bar {\n  width: 100%;\n  height: 15px;\n  border-radius: 8px;\n  background: linear-gradient(90deg, #00befb 0%, #cc00fc 100%);\n}\n\n.section-dialog-container .progress-item .right .progress-bar .bg {\n  width: 100%;\n  height: 15px;\n  position: absolute;\n  border-radius: 8px;\n  background: linear-gradient(90deg, rgba(0, 190, 251, 0.2) 0%, rgba(204, 0, 252, 0.2) 100%);\n}\n\n.section-dialog-container .progress-item .right .icons {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  position: relative;\n  top: -49px;\n}\n\n.section-dialog-container .progress-item .right .icons .comp {\n  width: 40px;\n  height: 60px;\n}\n\n.section-dialog-container .progress-item .right .icons .not-comp {\n  width: 30px;\n  height: 30px;\n}\n\n.section-dialog-container .progress-item .right .texts {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  padding: 0 8px;\n  position: relative;\n  top: -42px;\n}\n\n.section-dialog-container .progress-item .right .texts p {\n  font-size: 24px;\n  color: #fff;\n  font-weight: bold;\n  width: 100px;\n}\n</style>\n"
                    },
                    "left": 34.84,
                    "top": 584.79,
                    "index": "33beeae7-6d34-4ad4-b108-00903ba900ad",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 0,
                    "display": false,
                    "proxy": true,
                    "record": "2",
                    "dataMethod": "get",
                    "url": "http://platform_api.hibuilding.cn/api/v3/screen/project/project_stage",
                    "public": "af280484-d741-47f8-8279-ec247c2de39d"
                }
            ],
            "zIndex": 5,
            "child": {},
            "isname": false,
            "dataFormatter": ""
        }
    ]
}